Zadanie: importowanie w pozostałych plikach
Dodaj importy w pozostałych plikach JS. Korzystaj z ESLinta jako wskazówki, które obiekty lub klasy jeszcze nie zostały zaimportowane. Czytaj komunikaty ESLinta – jeśli zaimportujesz obiekt, który nie jest używany w danym pliku, ESLint również zgłosi błąd.
Kiedy ESLint nie będzie już informował o żadnych błędach, uruchom npm run watch i sprawdź komunikaty wyświetlane w konsoli. Jeśli któraś ze ścieżek do importowanych plików jest nieprawidłowa, w konsoli zobaczysz błąd. Wtedy musisz sprawdzić ścieżki do importowanych plików. Pamiętaj, że ścieżka do importowanego pliku jest zawsze relatywna do pliku, w którym importujesz. W razie wątpliwości, wróć do przykładów które podaliśmy powyżej i wzoruj się na nich.
Efektem tych zmian powinna być strona działająca tak samo jak wcześniej – bez błędów zgłaszanych przez ESLinta czy konsolę.
Dzięki temu udało nam się zachować całą funkcjonalność, włącznie z dodawaniem do koszyka, ale z podziałem na kilka mniejszych plików z kodem JS. Będzie nam łatwiej się w nich odnaleźć, a nawet otwierać je obok siebie, jeśli mamy taką potrzebę.
Co więcej, przyzwyczajamy się w ten sposób do architektury projektu, która często jest stosowana w komercyjnych projektach, i z którą zapewne spotkasz się w swojej pracy. Przygotujesz się również do rozpoczęcia pracy z React.js, którym zajmiemy się już niedługo. Tam również spotkasz się z podejściem komponentowym.
